
<template>
  <!-- 下拉菜单组件，用于设备的音量控制 -->
  <el-dropdown
    :hide-on-click="false"
    :disabled="loading || floating"
    @command="handleCommand"
  >
    <!-- 插槽，用于自定义触发器，传递 loading 状态和 handleTrigger 方法 -->
    <slot :loading :trigger="handleTrigger" />

    <template #dropdown>
      <!-- 下拉菜单项，循环生成音量控制选项 -->
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item of options"
          :key="item.value"
          :command="item.value"
        >
          {{ $t(item.label) }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
export default {
  props: {
    // 设备对象，用于执行音量控制命令
    device: {
      type: Object,
      default: () => ({}),
    },
    // 标识是否处于浮动状态，影响菜单的显示和操作
    floating: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 加载状态，用于禁用菜单和显示加载指示
      loading: false,
      /**
       * 定义命令映射对象，用于将特定的键映射到相应的Android按键事件命令
       * 这使得通过发送按键事件来控制设备的音量成为可能
       */
      commandMap: {
        // 映射音量减小命令到相应的Android按键事件
        'volume-down': 'input keyevent KEYCODE_VOLUME_DOWN',
        // 映射音量增加命令到相应的Android按键事件
        'volume-up': 'input keyevent KEYCODE_VOLUME_UP',
        // 映射音量静音命令到相应的Android按键事件
        'volume-mute': 'input keyevent KEYCODE_VOLUME_MUTE',
      },
    }
  },
  computed: {
    // 计算属性，生成音量控制菜单选项
    options() {
      const value = [
        {
          label: this.$t('device.control.volume-up.name'),
          value: 'volume-up',
        },
        {
          label: this.$t('device.control.volume-down.name'),
          value: 'volume-down',
        },
        {
          label: this.$t('device.control.volume-mute.name'),
          value: 'volume-mute',
        },
      ]
      return value
    },
  },
  methods: {
    // 自定义触发器方法，用于在浮动状态下打开音量控制菜单
    handleTrigger() {
      if (!this.floating) {
        return false
      }

      // 监听一次音量控制命令执行的结果，调用 handleCommand 方法处理
      window.electron.ipcRenderer.once(
        'execute-device-volume-shell',
        (event, data) => {
          this.handleCommand(data)
        },
      )

      // 将菜单选项转换为原始对象数组，发送到主进程打开音量控制菜单
      const options = toRaw(this.options)

      window.electron.ipcRenderer.send('open-device-volume-menu', {
        options,
      })
    },
    // 处理音量控制命令执行结果的方法
    async handleCommand(value) {
      // 设置加载状态为 true
      this.loading = true

      // 根据菜单选项获取对应的 ADB 命令
      const command = this.commandMap[value]

      // 执行 ADB 命令，对设备进行音量控制
      this.$adb.deviceShell(this.device.id, command)

      // 重置加载状态为 false
      this.loading = false
    },
  },
}
</script>

<style></style>
